<template>
	<view class="my">
		<view class="green"></view>
		<!-- 用户信息 -->
		<view class="top">
			<view class="top-image">
			<image src="../../static/my/0194b25ed70a55a801215aa019fd8b.jpg@260w_195h_1c_1e_1o_100sh.png" mode=""></image>
		</view>
		<view class="top-r">
			<view class="username">UID:16843348</view>
			<view class="num">188****4852</view>
		</view>
		</view>
		
		<!-- 个人积分 -->
		<view class="integral">
			<top-green list="个人积分"></top-green>
			<view class="info">
				<block v-for="(item,index) in infolist" :key="index">
				<info-list :list="item"></info-list>
				
				</block>
			</view>
		</view>
		
		<!-- 我的环保足迹 -->
		<view class="track">
			<top-green list="我的环保足迹"></top-green>
			<view class="track-item">
				<block v-for="(item,index) in list.track" :key="item.id">
				<track-list :list="item"></track-list>
			</block>
			</view>
		</view>
		
		<!-- 我的服务 -->
		
		<view class="my-service">
			<top-green list="我的服务"></top-green>
			<view class="service-item">
				<block v-for="(item,index) in list.service" :key="item.id">
					<track-list :list="item"></track-list>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infolist:[
					{id:0,image:"../../static/my/钱包.png",num:"0.00",value:"我的余额（元）",color:"#e6b67d"},
					{id:1,image:"../../static/my/回收.png",num:"1500",value:"我的环保值",color:"#56ddaf"}
				],
				list:{
					track:[
						{id:0 , image:"../../static/my/矩形 34.png",value:"兑奖记录"},
						{id:1 , image:"../../static/my/矩形 39.png",value:"投递记录"},
						{id:2 , image:"../../static/my/矩形 38.png",value:"投诉记录"},
						{id:3 , image:"../../static/my/椭圆 5.png",value:"预约记录"}
					],
					service:[
						{id:4 ,image:"../../static/my/组 12.png",value:"地址管理"},
						{id:5 ,image:"../../static/my/矩形 37.png",value:"绑定IC卡"},
						{id:6 ,image:"../../static/my/图层 3.png",value:"家庭成员"},
						{id:7 ,image:"../../static/my/我的房屋.png",value:"我的房号"},
						{id:8 ,image:"../../static/my/矩形 36.png",value:"个人信息"},
						{id:9 ,image:"../../static/my/椭圆 4.png",value:"常见问题"},
						{id:10 ,image:"../../static/my/矩形 37 拷贝 2.png",value:"意见反馈"},
					]
				}
			};
		}
	}
</script>

<style lang="less" scoped>
 .my{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 position: relative;
	 background-color: #f5f5f5;
	 width: 100vw;
	 min-height: 100vh;
	 z-index: 0;
	 .green{
	 	position: absolute;
	 	top: 0;
	 	left: 0;
	 	width: 100vw;
	 	height: 110rpx;
	 	background-color: #00c783;
	 	// border-radius: 0 0 30rpx 30rpx;
	 	z-index: -1;
	 }
 }
 .top{
	 display: flex;
	 align-items: center;
	 width: 710rpx;
	 height: 180rpx;
	 margin-top: 20rpx;
	 background-color: #ffffff;
	 // box-sizing: border-box;
	  border-radius: 15rpx;
 }
 .top-image{
	 width: 120rpx;
	 height: 120rpx;
	 margin-left: 40rpx;
	 image{
		 width: 100%;
		 height: 100%;
	 }
 }
 .top-r{
	 width: 120rpx;
	 height: 120rpx;
	 margin-left: 40rpx;
	 .username{
		 margin-top: 20rpx;
		 font-weight: 500;
		 font-size: 30rpx
	 }
	 .num{
		 margin-top: 20rpx;
		 font-size: 26rpx;
		 color: #a7a7a7;
	 }
 }
 .integral{
	 position: relative;
	 height:220rpx;
	 width: 710rpx;

 }
 .info{
	 display: flex;
	 align-items: center;
	 justify-content: space-around;
	 // margin-bottom: 10rpx;
 }
 .track{
	 position: relative;
	 margin-top: 30rpx;
	 width: 710rpx;
	 height: 250rpx;
	 background-color: #fff;
	 border-radius: 15rpx;
 }
 .track-item{
	height: 140rpx;
	width: 710rpx;
	display: flex;
	align-items: center;
	// justify-content: space-around;
	margin-top: 30rpx;
 }
 .my-service{
	 position: relative;
	 margin-top: 20rpx;
	 width: 710rpx;
	 height: 430rpx;
	 background-color: #fff;
	 border-radius: 15rpx;
 }
 .service-item{
	 height: 340rpx;
	 width: 710rpx;
	 display: flex;
	 align-items: center;
	 flex-flow:row wrap;
	 // justify-content: space-around;
 }
</style>
